<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<scroll-view scroll-y="true" class="ContentScrooll">
			<view class="content">

				<view class="contentCenter">


					<text class="contentCenterTopText">第{{bundleCode}}扎二维码，可前往裁床打菲打印</text>


					<view class="qrCodeContent">
						<!-- <image class="qrCodeContentImg" src="../../../static/logo.png" mode=""></image> -->
						<uqrcode class="qrCodeContentImg" ref="uqrcode" canvas-id="qrcode" :value="qrCodeContent"
							:options="options"></uqrcode>
					</view>



					<view class="contentCenterList">

						<view class="baseListItemColorRight">


							<view class="baseListItemColorRightItem" v-for="(item2,index2) in listZhaData">
								<view class="baseListItemColorLeftInnerItemRight">

									<text class="baseListItemColorLeftInnerText_1">{{item2.title}}</text>
									<text class="baseListItemColorLeftInnerText">{{item2.content}}</text>
								</view>
								<view class="line" v-if="index2< listZhaData.length-2"></view>
							</view>


						</view>




					</view>





					<view class="loginContent">

						<text @click="OperationClickOpen()" class="login">{{login}}</text>
					</view>


					<!-- <view class="loginContentSave" v-if="false">

						<text @click="OperationClickOpen()" class="save">{{save}}</text>
					</view> -->
					<view class="loginContentSave">

						<text @click="handlePrint()" class="save">{{print}}</text>
					</view>

				</view>




			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	// 或者
	import uqrcode from '@/subPackA/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'; // npm install @uqrcode/js
	export default {
		components: {
			MyNav,
			uqrcode,
			bgImage
		},
		data() {
			return {
				login: '发送二维码',
				save: '保存到相册',
				print: '打印菲票',

				title: '扎号二维码',
				isback: true,
				bundleCode: '',
				listZhaData: [{
						title: '尺码',
						content: ''
					},
					{
						title: '颜色',
						content: ''
					},
					{
						title: '数量',
						content: '0'
					},
					{
						title: '损耗',
						content: '0'
					},
					{
						title: '床号',
						content: ''
					}
				],
				itemData: {},

				options: {
					margin: 10
				},

				qrCodeContent: '',

			}
		},
		onLoad: function(option) {
			console.log('option', option)
			if (option && Object.keys(option).length > 0) {
				let item = JSON.parse(decodeURIComponent(option.item));
				console.log('item', item)
				this.listZhaData = item.list
				this.itemData = item.item
				this.qrCodeContent = item.item.id
				this.bundleCode = item.item.bundleCode
			}
		},
		methods: {
			handlePrint() {
				this.itemData.type = 'one'
				uni.navigateTo({
					url: '/subPackA/cuttingOrder/printQRCode/printQRCode?item=' + encodeURIComponent(JSON
						.stringify(this.itemData)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}

	.loginContentSave {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		margin-top: 30rpx;

		margin-bottom: 30rpx;




	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;


		margin-top: 110rpx;

	}

	.save {

		display: flex;
		justify-content: center;

		align-items: center;
		text-align: center;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 30rpx;

		width: 520rpx;
		height: 100rpx;
		background: #ECF5FD;
		border-radius: 20rpx;


	}

	.login {
		display: flex;
		justify-content: center;

		align-items: center;
		text-align: center;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;

		width: 520rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;







	}



	.line {
		width: 100%;
		height: 1rpx;
		background: #DDDDDD;


	}

	.contentCenterList {

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 570rpx;
		height: 320rpx;
		background: #F5F7F9;
		border-radius: 10rpx;

		margin-top: 60rpx;
	}

	.baseListItemColorLeftInnerText {

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		text-align: center;
	}

	.baseListItemColorLeftInnerText_1 {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #999999;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.baseListItemColorLeftInnerItemRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 235rpx;
		height: 80rpx;
		/* background: #F5F7F9; */



	}

	.baseListItemColorRightItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		flex: 0 0 calc((100%)/2);
		margin-bottom: 20rpx;
	}

	.baseListItemColorRight {

		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 100%;

		flex-wrap: wrap;
		margin-top: 10rpx;

		// background-color: #0AE1C6;
	}



	.qrCodeContentImg {

		display: flex;
		justify-content: center;
		align-items: center;

		width: 300rpx;
		height: 300rpx;
	}

	.qrCodeContent {

		display: flex;
		justify-content: center;
		align-items: center;

		width: 360rpx;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 1px solid #CCCCCC;

		margin-top: 60rpx;


	}

	.contentCenterTopText {

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		width: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 60rpx;

		margin-top: 30rpx;


	}

	.content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;



	}

	.ContentScrooll {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		width: 100%;
		height: 1500rpx;


	}

	.contentCenter {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		width: 650rpx;
		background: #FFFFFF;

		border-radius: 20rpx;
	}
</style>